<template>
	<view class="uni-common-mt">
		<view class="uni-form-item uni-column">
			<radio-group class="uni-list" @change="radioChange">
				<view class="uni-list-cell uni-list-cell-pd" v-for="(item,index) in radioItems" :key="index">
					<view>
						<radio active-background-color="#53786C" :id="item.name" :value="item.name"
							:checked="item.checked"></radio>
					</view>
					<label class="label-2-text" :for="item.name">
						<text>{{item.value}}</text>
					</label>
				</view>
			</radio-group>
		</view>
		<view class="selectHour" v-if="showHour">
			<radio-group class="hour-list" @change="hourChange">
				<view class=" hourItem" v-for="(item,index) in hoursItems" :key="index">
					<view>
						<radio active-background-color="#53786C" :id="item.value" :value="item.value"
							:checked="item.checked"></radio>
					</view>
					<label class="label-2-text" :for="item.name">
						<text>{{item.name}}</text>
					</label>
				</view>
			</radio-group>
		</view>

	</view>

	<view class="save" @click="saveMode">
			{{$t('deviceMode.save')}}
	</view>
</template>
<script>
	import {
		apiDeviceSendCmd,
		apiGetDeviceInfo
	} from '../../api/device_api';
	import {
		i18nTool
	} from '../../utils/i18en';
	import {
		getImei
	} from '../../utils/user_tools';
	import store from '../../store';
	export default {
		data() {
			return {
				imei: null,
				resData: null,
				param: {},
				timeInterval: 30,
				mode: null,
				showHour: false,
				timeOut: null,
				radioItems: [{
						name: '0',
						value: i18nTool('deviceMode.trackAllTime'),

					},
					{
						name: '1',
						value: i18nTool('deviceMode.trackNormal'),

					},
					{
						name: '2',
						value: i18nTool('deviceMode.trackWeak'),
					}
				],
				hoursItems: [{
						name: i18nTool('deviceMode.oneHour'),
						value: '3',

					},
					{
						name: i18nTool('deviceMode.twoHour'),
						value: '4',

					},
					{
						name: i18nTool('deviceMode.fourHour'),
						value: '5',
					},
					{
						name: i18nTool('deviceMode.eightHour'),
						value: '6',
					},
					{
						name: i18nTool('deviceMode.sixteenHour'),
						value: '7',
					},
					{
						name: i18nTool('deviceMode.twentyFour'),
						value: '8',
					},

				]
			}
		},
		computed: {
			modeId() {
				return store.getters.modeId;
			},
		},
		watch: {
			modeId: {
				deep: true,
				handler(newval, oldval) {
					uni.hideLoading();
					if (this.timeOut) {
						clearTimeout(this.timeOut);
					}
					uni.showToast({
						icon: 'none',
						title: i18nTool('deviceMode.setSuccess'),
					})
					setTimeout(()=>{
						uni.navigateBack();
					},1000)
					

				}
			},
		},
		// "mode":1 //0丢失，1正常，2省电
		async onLoad() {
			this.imei = getImei();
			uni.setNavigationBarTitle({
				title: i18nTool("deviceMode.navTitle")
			})
			this.getInfoMode();



		},
		onHide() {
			if (this.timeOut) {
				clearTimeout(this.timeOut);
			}
		},
		methods: {
			async getInfoMode() {
				this.param.imei = this.imei;
				let res = await apiGetDeviceInfo({
					imei: this.imei
				});
				this.resData = res.content;
				this.mode = this.resData.mode;
				this.timeInterval = this.resData.timeParam;
				if (this.resData.mode == 0) {
					this.radioItems[0].checked = true;
				} else if (this.resData.mode == 1) {
					this.radioItems[1].checked = true;
				} else if (this.resData.mode == 2) {
					this.radioItems[2].checked = true;
					if (this.resData.timeParam == 1) {
						this.hoursItems[0].checked = true;
					} else if (this.resData.timeParam == 2) {
						this.hoursItems[1].checked = true;
					} else if (this.resData.timeParam == 4) {
						this.hoursItems[2].checked = true;
					} else if (this.resData.timeParam == 8) {
						this.hoursItems[3].checked = true;
					} else if (this.resData.timeParam == 16) {
						this.hoursItems[4].checked = true;
					} else if (this.resData.timeParam == 24) {
						this.hoursItems[5].checked = true;
					} else {
						this.hoursItems[0].checked = true;
					}
					this.showHour = true;
				}
			},
			radioChange: function(e) {
				var checked = e.detail.value

				if (checked == 0) {
					this.timeInterval = 30
					this.mode = 0
					this.showHour = false;
				} else if (checked == 1) {
					this.timeInterval = 60
					this.mode = 1
					this.showHour = false;
				} else if (checked == 2) {
					this.mode = 2
					this.showHour = true;
					this.timeInterval = 1;
					this.hoursItems[0].checked = true;
				}
			},
			hourChange: function(e) {
				if (e.detail.value == 3) {
					this.timeInterval = 1
				} else if (e.detail.value == 4) {
					this.timeInterval = 2
				} else if (e.detail.value == 5) {
					this.timeInterval = 4
				} else if (e.detail.value == 6) {
					this.timeInterval = 8
				} else if (e.detail.value == 7) {
					this.timeInterval = 16
				} else if (e.detail.value == 8) {
					this.timeInterval = 24
				}
			},
			async saveMode() {
				this.param.cmd = "UPLOAD";
				this.param.params = this.mode + ',' + this.timeInterval;

				let res = await apiDeviceSendCmd(this.param);
				if (res.status == 0) {
					uni.showLoading({
						mask: true,
						title: "Loading...",
					})
					this.timeOut = setTimeout(() => {
						uni.hideLoading();
						uni.showToast({
							icon: "none",
							title:  i18nTool('deviceMode.setFail'),
						})
						setTimeout(() => {
							uni.navigateBack();
						}, 1000)

					}, 10000)

				} else {
					setTimeout(() => {
						uni.navigateBack();
					}, 1000)

				}

			}
		}
	}
</script>

<style lang="scss" scoped>
	.uni-list-cell {
		display: flex;
		justify-content: flex-start;
		padding: 40rpx 40rpx;
		border-bottom: 2rpx solid #f9f9f9;
	}

	.uni-list .label-3 {
		padding: 40rpx 0;
	}

	.hourItem {
		padding: 20rpx 0;
		font-size: 26rpx;
		color: #666;
		display: flex;
		justify-content: flex-start;
	}

	.label-2-text {
		flex: 1;
	}

	.selectHour {
		margin-left: 60rpx;
		margin-top: 10rpx;
	}

	.save {
		margin-left: 30rpx;
		margin-right: 30rpx;
		margin-top: 100rpx;
		height: 80rpx;
		color: #fff;
		background-color: #53786C;
		border-radius: 40rpx;
		@include flex-box-set(center);

	}
</style>